<script>
import VideoView from "./components/VideoView.vue";
import Message from './module/message'
import Mediasoup from "./module/mediasoup";
import axios from 'axios'
import {Device} from 'mediasoup-client';

export default {
  components: {VideoView},
  mounted() {
    const receiveVideo = this.$refs.recvVideo
    this.mediasoup = new Mediasoup(this.openVideo, this.openAudio, (peerId) => {
      console.log('peerId', peerId)
      this.peerId = peerId
      this.mediasoup.createTransport(false)
      this.mediasoup.createTransport(true)
    }, (stream) => {
      for (let track of stream.getTracks()) {
        if (track.kind === 'video') {
          this.localVideoTrack = track
        } else if (track.kind === 'audio') {
          console.log(track)
          this.localAudioTrack = track
        }
      }
    }, (consumer, peerId, pause) => {
      const {track} = consumer;
      if (this.room.get(peerId) === undefined) {
        this.room.set(peerId, {
          'videoTrack': '',
          'audioTrack': '',
          'openVideo': false,
          'openAudio': false
        })
      }
      //根据 mediasoup 数据回调，当pause 是true, 代表那边没有数据,直接不显示
      if (track.kind === 'video') {
        this.room.get(peerId).videoTrack = track
        if (!pause)
          this.room.get(peerId).openVideo = true;
        else
          this.room.get(peerId).openVideo = false
      } else if (track.kind === 'audio') {
        this.room.get(peerId).audioTrack = track
        if (!pause)
          this.room.get(peerId).openAudio = true;
        else
          this.room.get(peerId).openAudio = false
      }
    }, (destroy) => {
      this.room.delete(destroy.peerId)
    })
  },
  data() {
    return {
      room: new Map(),
      mediasoup: Mediasoup,
      localVideoTrack: MediaStreamTrack,
      localAudioTrack: MediaStreamTrack,
      peerId: 'mediasoup',
      openVideo: true,
      openAudio: false,
      localAudio: true
    }
  },
  methods: {
    async clickVideo(peerId) {
      if (peerId === this.peerId) {
        this.openVideo ? this.openVideo = false : this.openVideo = true
        if (!this.openVideo) {
          await this.mediasoup.pauseVideo();
        } else {
          await this.mediasoup.resumeVideo();
        }
      } else {
        this.room.get(peerId).openVideo ? this.room.get(peerId).openVideo = false : this.room.get(peerId).openVideo = true

      }
      console.log(peerId)
    },
    async clickAudio(peerId) {
      if (peerId === this.peerId) {
        this.openAudio ? this.openAudio = false : this.openAudio = true
        if (!this.openAudio) {
          await this.mediasoup.pauseAudio();
        } else {
          await this.mediasoup.resumeAudio();
        }
      } else {
        this.room.get(peerId).openAudio ? this.room.get(peerId).openAudio = false : this.room.get(peerId).openAudio = true
      }
    }
  }
}

</script>

<template>
  <el-row >

    <el-col :lg="6" :xs="24" :sm="24" :md="24"  :xl="6">
      <div class="video-view-video-body">
        <video-view @clickVideo="clickVideo" @clickAudio="clickAudio" :peer-id="peerId" :local-audio="localAudio" :open-audio="openAudio" :open-video="openVideo"
                    :video-track="localVideoTrack" :audio-track="localAudioTrack" ref="localVideo"/>
      </div>
    </el-col>


    <el-col :lg="18" :xs="24" :sm="24" :md="24"  :xl="18">
      <div class="remote-video">
        <video-view  class="remote-video-item" style="" v-for="[id,stream] of room" :peer-id="id"
                    :video-track="stream.videoTrack" :audio-track="stream.audioTrack"
                    :open-audio="stream.openAudio" :local-audio="false" :open-video="stream.openVideo"
                    ref="localVideo"/>
      </div>
    </el-col>

  </el-row>
  <div>

  </div>

</template>

<style scoped>
@media only screen and (min-width: 1200px){
  .remote-video-item {
    width: 25%; margin:2em;
  }
}

@media only screen and (min-width: 1200px){
  .remote-video-item {
    width: 25%; margin:2em;
  }

  .video-view-video-body {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column-reverse;
  }

  .remote-video {
    width: 100%;
    height: 95vh;
    display: flex;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-direction: row;
    justify-content: flex-start;
    flex-flow: wrap;
  }
}

@media only screen and (max-width: 992px){
  .remote-video-item {
    width: 95%;
    margin-top:2%;
  }

  .video-view-video-body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
  }

  .remote-video {
    width: 100%;
    display: flex;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-direction: row;
    justify-content: flex-start;
    flex-flow: wrap;
  }
}




header {
  line-height: 1.5;
}





.canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}


.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
